<template>
    <div class="article-lists">
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="商品名称">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.goodsName"
                        clearable
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="商品状态">
                    <el-select class="!w-[280px]" v-model="queryParams.onOffStatus">
                        <el-option label="全部" value />
                        <el-option label="已上架" value="2" />
                        <el-option label="已下架" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="分类">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.cateName"
                        clearable
                        placeholder="请输入分类名称"
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="品牌">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.brandName"
                        clearable
                        placeholder="请输入品牌名称"
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="商品ID" prop="id" min-width="80" />
                <el-table-column
                    show-overflow-tooltip
                    label="产品名称"
                    min-width="200"
                    prop="goodsName"
                ></el-table-column>
                <el-table-column show-overflow-tooltip label="产品主图" min-width="100">
                    <template #default="{ row }">
                        <el-image
                            style="width: 50px; height: 50px"
                            :src="row.defaultImage"
                            :fit="row.defaultImage"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="分类" prop="cateName" min-width="100"></el-table-column>
                <el-table-column label="品牌" min-width="100" prop="brandName"></el-table-column>
                <el-table-column label="商品状态" min-width="100" key="1">
                    <template #default="{ row }">
                        <el-switch
                            v-if="row.id != 1"
                            :model-value="row.onOffStatus"
                            :active-value="2"
                            :inactive-value="1"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="供货商结算价" min-width="100" prop="supplierPrice">
                    <template #default="{ row }">
                        {{ row.defaultSpec?.supplierPrice }}
                    </template>
                </el-table-column>
                <el-table-column label="平台结算价" min-width="100" prop="supplyChainPrice">
                    <template #default="{ row }">
                        {{ row.defaultSpec?.supplyChainPrice }}
                    </template>
                </el-table-column>
                <el-table-column label="利润" min-width="100" prop="profits">
                    <template #default="{ row }">
                        {{ row.defaultSpec?.profits }}
                    </template>
                </el-table-column>
                <el-table-column label="划线价" min-width="100" prop="marketPrice">
                    <template #default="{ row }">
                        {{ row.defaultSpec?.marketPrice }}
                    </template>
                </el-table-column>
                <el-table-column label="采样量" min-width="80" prop="samplingNum"></el-table-column>
                <el-table-column label="打包数" min-width="100" prop="marketPrice">
                    <template #default="{ row }">
                        {{ row.defaultSpec?.packageNum }}
                    </template>
                </el-table-column>
                <el-table-column label="快递起订量" min-width="100" prop="marketPrice">
                    <template #default="{ row }">
                        {{ row.defaultSpec?.moq }}
                    </template>
                </el-table-column>
                <el-table-column label="物流起订量" min-width="100" prop="marketPrice">
                    <template #default="{ row }">
                        {{ row.defaultSpec?.wlMoq }}
                    </template>
                </el-table-column>
                <el-table-column label="总库存" min-width="80" prop="totalStock"></el-table-column>
                <el-table-column label="销量" min-width="80" prop="salesVolume"></el-table-column>
                <el-table-column label="所属供货商" min-width="80" prop="supplierName">
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" link>
                            <router-link
                                :to="{
                                    path: '/goods/cashGoodsDetail',
                                    query: {
                                        id: row.id
                                    }
                                }"
                            >
                                查看详情
                            </router-link>
                        </el-button>
<!--                        <el-button type="primary" link @click="doEdit(row)"> 设置销量 </el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" @success="getLists()" @close="showEdit = false" />
    </div>
</template>
<script lang="ts" setup name="articleLists">
import { useDictOptions } from '@/hooks/useDictOptions'
import { usePaging } from '@/hooks/usePaging'
import { listPage } from '@/servers/goods/api/supplyChainshangpinguanli'
import editPopup from '../../salesEditor/index.vue'
const queryParams = reactive({
    goodsName: undefined,
    goodsType: 1,
    cid: '',
    onOffStatus:'',
    cateName:'',
    brandName:''
})

// 修改价格
const showEdit = ref(false)
const editRef = ref<any>()
const doEdit = async (row: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open(row)
}

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: listPage,
    params: queryParams
})

// const { optionsData } = useDictOptions<{
//     articleCate: any[]
// }>({
//     articleCate: {
//         api: articleCateAll
//     }
// })

onActivated(() => {
    getLists()
})

getLists()
</script>
